<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-wrap align-center justify-between benben-position-layout flex serviceApply_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center serviceApply_fd0_0' @tap.stop="handleJumpDiy" data-type="back"
          data-url="1">
          <image class='serviceApply_fd0_0_c0' mode="aspectFit" :src='STATIC_URL+"234.png"'></image>
        </view>
        <text class='serviceApply_fd0_1'>{{$t('申请售后')}}</text>
        <view class='flex flex-wrap align-center serviceApply_fd0_0'>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---申请售后-售后flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout serviceApply_flex_1">
        <view class='flex flex-wrap align-center serviceApply_fd1_0'>
          <image class='serviceApply_fd1_0_c0' mode="aspectFill" :src='dataShopInfo.coverPic'></image>
          <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
            <text class='serviceApply_fd1_0_c1_c0'>{{dataShopInfo.comdName}}</text>
            <text class='serviceApply_fd1_0_c1_c1'>{{dataShopInfo.comPropItemNames}}</text>
            <view class='flex flex-wrap align-center' v-if="types==1">
              <text class='serviceApply_fd1_0_c1_c2_c0'>{{$t('¥')}}</text>
              <text class=' serviceApply_fd1_0_c1_c2_c1'>
                <text>{{ dataShopInfo.sellPrice | frontPrice }}</text>
                <text class=' serviceApply_price2_fd1_0_c1_c2_c1'>{{ dataShopInfo.sellPrice | laterPrice }}</text>
              </text>
              <text class='serviceApply_fd1_0_c1_c2_c2'>x</text>
              <text class='serviceApply_fd1_0_c1_c2_c3'>{{dataShopInfo.secQuantNum}}</text>
            </view>
            <view class='flex flex-wrap align-center' v-if="types==2">
              <text class='serviceApply_fd1_0_c1_c2_c0'>{{$t('¥')}}</text>
              <text class=' serviceApply_fd1_0_c1_c2_c1'>
                <text>{{ dataShopInfo.rentPrice | frontPrice }}</text>
                <text class=' serviceApply_price2_fd1_0_c1_c2_c1'>{{ dataShopInfo.rentPrice | laterPrice }}</text>
              </text>
              <text class=' text-333 text-sm margin-left-sm'>
                押金¥{{ dataShopInfo.cashMoeny | frontPrice }}{{ dataShopInfo.cashMoeny | laterPrice }}
              </text>
              <text class=' serviceApply_fd1_0_c1_c2_c2'>x</text>
              <text class='serviceApply_fd1_0_c1_c2_c3'>{{dataShopInfo.secQuantNum}}</text>
            </view>
          </view>
        </view>
      </view>

      <!---申请售后-售后flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center serviceApply_flex_2">
      </view>

      <!---flex布局flex布局结束-->
      <!---申请售后-售后原因flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout serviceApply_flex_3">
        <view class='flex flex-wrap align-center serviceApply_fd3_0' @tap.stop="pickerDiy1679907974294=true">
          <text class='serviceApply_fd3_0_c0'>{{$t('售后选择')}}</text>
          <benben-input class='serviceApply_fd3_0_c1' type="text" :placeholder="$t('请选择售后类型')" confirm-type="done"
            :maxlength="-1" :disabled='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
            v-model="afterSaleLable" />
          <image class='serviceApply_fd3_0_c2' mode="aspectFit" :src='STATIC_URL+"298.png"'></image>
        </view>
        <view class='flex flex-wrap align-center serviceApply_fd3_0' @tap.stop="pickerDiy1679907850983=true">
          <text class='serviceApply_fd3_0_c0'>{{$t('退款原因')}}</text>
          <benben-input class='serviceApply_fd3_0_c1' type="text" :placeholder="$t('请选择退款原因')" confirm-type="done"
            :maxlength="-1" :disabled='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
            v-model="reason_name" />
          <image class='serviceApply_fd3_0_c2' mode="aspectFit" :src='STATIC_URL+"298.png"'></image>
        </view>
        <view class='flex flex-wrap align-center serviceApply_fd3_2'>
          <text class='serviceApply_fd3_2_c0'>{{$t('退款数量')}}</text>
          <text class=' serviceApply_fd3_3_c2'>
            <text class=' text-333 text-df'>{{ dataShopInfo.secQuantNum }}</text>
          </text>
          <!-- <benben-flex-number-box class-name='flex align-center self-center justify-center flex'
            input-class='serviceApply_numberBoxInputfd3_2_c1' v-model="num" :max="dataShopInfo.can_refund_num" :min="1"
            :disabled='true' :step="1" :opacity="0.3" v-if=" dataShopInfo.can_change_num==0">
            <template #minus>
              <image class='serviceApply_fd3_2_c1_c0' mode="aspectFill" :src='STATIC_URL+"299.png"'></image>
            </template>
            <template #plus>
              <image class='serviceApply_fd3_2_c1_c0' mode="aspectFill" :src='STATIC_URL+"300.png"'></image>
            </template>

          </benben-flex-number-box> -->


          <!-- <benben-flex-number-box class-name='flex align-center self-center justify-center flex'
            input-class='serviceApply_numberBoxInputfd3_2_c1' v-model="num" :max="dataShopInfo.can_refund_num" :min="1"
            :step="1" :opacity="0.3" @change="getMoneyFunc()" v-if=" dataShopInfo.can_change_num=='1'">
            <template #minus>
              <image class='serviceApply_fd3_2_c1_c0' mode="aspectFill" :src='STATIC_URL+"299.png"'></image>
            </template>
            <template #plus>
              <image class='serviceApply_fd3_2_c1_c0' mode="aspectFill" :src='STATIC_URL+"300.png"'></image>
            </template>

          </benben-flex-number-box> -->

        </view>
        <view class='flex flex-wrap align-center serviceApply_fd3_3'>
          <text class='serviceApply_fd3_0_c0'>{{$t('退款金额：')}}</text>
          <text class='serviceApply_fd3_3_c1'>{{$t('¥')}}</text>
          <text class=' serviceApply_fd3_3_c2'>
            <text class=' serviceApply_price1_fd3_3_c2'>{{ dataShopInfo.payMoney | frontPrice }}</text>
            <text class=' serviceApply_price2_fd3_3_c2'>{{ dataShopInfo.payMoney | laterPrice }}</text>
          </text>
        </view>
        <text class='serviceApply_fd3_4'>{{$t('不包含运费')}}</text>
        <view class='flex flex-wrap align-center serviceApply_fd3_5'>
          <text class='serviceApply_fd3_0_c0'>{{$t('退款说明')}}</text>
        </view>
        <view class='flex-direction flex-wrap align-stretch flex serviceApply_fd3_6'>
          <textarea class='flex-sub serviceApply_input_fd3_6' confirm-type="done" :placeholder="$t('请在此描述申请售后服务的原因')"
            :maxlength="800" :show-num='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
            v-model="content" />
          <template>
            <view class='flex flex justify-end serviceApply_numberfd3_6_c0'>
              <text class='serviceApply_numberfd3_6_c0_c0'>{{content.length}}</text>
              <text class='serviceApply_numberfd3_6_c0_c0'>/</text>
              <text class='serviceApply_numberfd3_6_c0_c0'>800</text>
            </view>
          </template>
        </view>
        <view class='flex flex-wrap align-center'>
          <benben-images-upload ref="benbenImagesUploadfd3_7_c0" :img-list.sync="url" :img-ids.sync="image"
            :maxlength="9">
            <template #content="{ num, maxlength, isShow, imgList }">
              <view class="flex flex-wrap align-start flex">

                <view v-for="(image, index) in imgList" :key="index"
                  class='flex position-relative serviceApply_fd3_7_c00'>
                  <text class='fu-iconfont2 position-absolute serviceApply_fd3_7_c000'
                    @tap.stop="$refs.benbenImagesUploadfd3_7_c0.delImage(index)">&#xE8E7;</text>
                  <image class='serviceApply_fd3_7_c001'
                    @tap.stop="$refs.benbenImagesUploadfd3_7_c0.previewImage(index)" :src='image'></image>
                </view>

                <image class='serviceApply_fd3_7_c01' @tap.stop="$refs.benbenImagesUploadfd3_7_c0.manyChooseImage()"
                  v-if="isShow" mode="aspectFit" :src='STATIC_URL+"301.png"'></image>

              </view>
            </template>
          </benben-images-upload>
        </view>
        <view class='flex align-stretch justify-center serviceApply_fd3_8'>
          <button class='serviceApply_fd3_8_c0' @tap.stop="submitRefundFunc()">{{$t('提交')}}</button>
        </view>
      </view>

      <!---申请售后-售后原因flex布局结束-->
      <!--售后原因选择器开始 -->
      <benben-picker ref="benbenWritePickerCodepicker4" :visible.sync="pickerDiy1679907850983" :label.sync='reason_name'
        :value.sync='reason_id' :options='refundReason' mode='selector' :mask-show='true' :timeout='true'
        :picker-height='88' default-type='id' :default-props='{"label":"logCause","value":"id"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between serviceApply_picker4_0'>
            <text class='serviceApply_picker4_0_c0'
              @tap="$refs.benbenWritePickerCodepicker4.cancel()">{{$t('取消')}}</text>
            <text class='serviceApply_picker4_0_c1'>{{$t('退款原因')}}</text>
            <text class='serviceApply_picker4_0_c2'
              @tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">{{$t('确定')}}</text>
          </view>
        </template>
      </benben-picker>
      <!--售后原因选择器结束 -->
      <!--售后类型选择器开始 -->
      <benben-picker ref="benbenWritePickerCodepicker5" :visible.sync="pickerDiy1679907974294"
        :label.sync='afterSaleLable' :value.sync='afterSaleID' :options='afterSale' mode='selector' :mask-show='true'
        :timeout='true' :picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between serviceApply_picker5_0'>
            <text class='serviceApply_picker5_0_c0'
              @tap="$refs.benbenWritePickerCodepicker5.cancel()">{{$t('取消')}}</text>
            <text class='serviceApply_picker5_0_c1'>{{$t('售后类型')}}</text>
            <text class='serviceApply_picker5_0_c2'
              @tap="$refs.benbenWritePickerCodepicker5.pickerConfirm()">{{$t('确定')}}</text>
          </view>
        </template>
      </benben-picker>
      <!--售后类型选择器结束 -->


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},


    data() {
      return {
        "pickerDiy1679907974294": false,
        "pickerDiy1679907850983": false,
        "dataShopInfo": {
          "num": "",
          "aid": "",
          "shop_price": "",
          "order_status": "",
          "goods_thumb": "",
          "usermerchant_id": "",
          "goods_money": "",
          "discount_money": "",
          "coupon_money": "",
          "shop_coupon_money": "",
          "order_id": "",
          "goods_id": "",
          "sku_id": "",
          "goods_name": "",
          "sku_name": "",
          "can_refund_num": "",
          "can_refund_type": "",
          "can_change_num": ""
        },
        "num": 1,
        "dataMoney": {
          "refund_money": ""
        },
        "afterSale": [{
          "name": "退款（无需退货）",
          "value": "1",
          "image": ""
        }, {
          "name": "退货退款",
          "value": "2",
          "image": ""
        }],
        "afterSaleLable": "",
        "afterSaleID": "1",
        "refundReason": [],
        "reason_name": "",
        "reason_id": "",
        "content": "",
        "url": [],
        "image": "",
        "text": "shenqingchengg",
        "aid": "1032",
        type: '',
        types: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      let {
        aid,
        type,
        types
      } = options
      if (aid !== undefined) this.aid = aid
      if (type !== undefined) this.type = type
      if (types !== undefined) this.types = types
      this.getInfoFunc()
      // this.getRefundReasonFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //获取商品信息
      async getInfoFunc() {
        //请求方法
        //数据验证 getCommodPropDataLeaShow
        let urldata = ''
        if (this.types == 1) {
          urldata = global.apiUrls.getBuyOrderRecItem
        } else {
          urldata = global.apiUrls.getLeaOrderRecItem
        }
        let datadataShopInfo = await this.$api.get(urldata, {
          id: this.aid
        });

        if (datadataShopInfo.data.code != 0) {
          this.$message.info(datadataShopInfo.data.msg);
          return
        }
        let infodataShopInfo = datadataShopInfo.data;
        this.dataShopInfo = infodataShopInfo.data

        this.afterSaleID = 1
        if (this.afterSaleID == 1) {
          this.afterSaleLable = '退款（无需退货）'
        } else if (this.afterSaleID == 2) {
          this.afterSaleLable = '退货退款'
        } else if (this.afterSaleID == 3) {
          this.afterSaleLable = '维修'
        } else {
          this.afterSaleLable = '退货退款'
        }
        this.url = this.dataShopInfo.reasonImagess
        this.image = this.dataShopInfo.reasonImages
        this.reason_name = this.dataShopInfo.reason
        this.num = this.dataShopInfo.reasonDesc
        // this.getMoneyFunc()
        this.content = this.dataShopInfo.reason
        console.log('this.dataShopInfo.afSaleType', this.dataShopInfo.afSaleType)
        if (this.dataShopInfo.afSaleType == 1) {
          this.afterSale = [{
            name: '退款（无需退货）',
            value: '1',
            image: ''
          }]
        }
        if (this.dataShopInfo.afSaleType == 2) {
          this.afterSale = [{
            name: '退款（无需退货）',
            value: '1',
            image: ''
          }, {
            name: '退货退款',
            value: '2',
            image: ''
          }]
        }
        if (this.dataShopInfo.afSaleType == 3) {
          this.afterSale = [{
            name: '退款（无需退货）',
            value: '1',
            image: ''
          }, {
            name: '退货退款',
            value: '2',
            image: ''
          }, {
            name: '维修',
            value: '3',
            image: ''
          }]
        }
        this.getRefundReasonFunc()
      },
      //获取退款金额
      async getMoneyFunc() {
        //请求方法
        //数据验证

        let datadataMoney = await this.$api.post(global.apiUrls.post64257c480b1a1, {
          order_goods_id: this.aid,
          num: this.num
        });

        if (datadataMoney.data.code != 1) {
          this.$message.info(datadataMoney.data.msg);
          return
        }
        let infodataMoney = datadataMoney.data;
        this.dataMoney = infodataMoney.data

      },
      //获取退款原因
      async getRefundReasonFunc() {
        //请求方法
        //数据验证

        let datarefundReason = await this.$api.get(global.apiUrls.qrySelectCause, {
          typeNum: '2',
          list_rows: '999',
        });

        if (datarefundReason.data.code != 0) {
          this.$message.info(datarefundReason.data.msg);
          return
        }
        let inforefundReason = datarefundReason.data;
        this.refundReason = inforefundReason.data.records

      },
      //提交申请售后
      async submitRefundFunc() {
        if (!validate(this.afterSaleLable, 'require')) {
          this.$message.info(global.i18n.t('请选择售后类型'));
          return false;
        }
        if (!validate(this.reason_name, 'require')) {
          this.$message.info(global.i18n.t('请选择退款原因'));
          return false;
        }
        if (!validate(this.content, 'require')) {
          this.$message.info(global.i18n.t('请填写退款说明'));
          return false;
        }
        //请求方法
        let reasonImages = ''
        if (this.url.length) {
          reasonImages = this.url.join(',')
        }
        console.log('url', this.url)
        //数据验证
        let urldata = ''
        if (this.types == 1) {
          if (this.type) {
            urldata = global.apiUrls.applySaleService
          } else {
            urldata = global.apiUrls.modApplySaleService
          }
        } else {
          if (this.type) {
            urldata = global.apiUrls.applySaleLeaService
          } else {
            urldata = global.apiUrls.modApplyLeaSaleService
          }
        }

        let data64219b8235a5e = await this.$api.dbPost(urldata, {
          id: this.dataShopInfo.id,
          // goods_id: this.dataShopInfo.goods_id,
          // sku_id: this.dataShopInfo.sku_id,
          // num: this.num,
          afSaleType: this.afterSaleID, //售后类型
          reason: this.reason_name, //请选择退款原因
          reasonImages: reasonImages, //图片
          reasonDesc: this.content, //	原因说明
          applyAmount: this.dataShopInfo.payMoney
        });
        if (!data64219b8235a5e) return
        if (data64219b8235a5e.data.code != 0) {
          this.$message.info(data64219b8235a5e.data.msg);
          return
        }
        uni.$emit('shenqingchenggss', this.text)
        uni.showToast({
          title: global.i18n.t('提交成功'),
          mask: true,
          icon: 'none',
          duration: 1500
        });
        setTimeout(() => {
          this.$urouter.navigateBack(2);
        }, 300)
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #fff;
    background-size: 100% auto;
  }

  .serviceApply_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .serviceApply_fd0_1 {
    color: #333333;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
  }

  .serviceApply_fd0_0_c0 {
    width: 20rpx;
    height: 36rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .serviceApply_fd0_0 {
    width: 100rpx;
    height: 88rpx;
  }

  .serviceApply_flex_1 {
    padding: 24rpx 24rpx 0rpx 24rpx;
  }

  .serviceApply_fd1_0_c1_c2_c3 {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .serviceApply_fd1_0_c1_c2_c2 {
    margin: 0rpx 0rpx 0rpx auto;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .serviceApply_price2_fd1_0_c1_c2_c1 {
    font-size: 22rpx;
  }

  .serviceApply_fd1_0_c1_c2_c1 {
    color: var(--benbenFontColor7);
    font-weight: 700;
    line-height: 40rpx;
    font-size: 32rpx;
  }

  .serviceApply_fd1_0_c1_c2_c0 {
    font-size: 22rpx;
    font-weight: 700;
    color: var(--benbenFontColor7);
    line-height: 40rpx;
  }

  .serviceApply_fd1_0_c1_c1 {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin: 8rpx 0rpx 36rpx 0rpx;
  }

  .serviceApply_fd1_0_c1_c0 {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    line-height: 42rpx;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .serviceApply_fd1_0_c0 {
    width: 200rpx;
    height: 200rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .serviceApply_fd1_0 {
    margin: 0rpx 0rpx 34rpx 0rpx;
  }

  .serviceApply_flex_2 {
    background: rgba(248, 248, 248, 1);
    width: 750rpx;
    height: 20rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .serviceApply_flex_3 {
    padding: 32rpx 24rpx 140rpx 24rpx;
  }

  .serviceApply_fd3_8_c0 {
    background: var(--benbenbgColor7);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    color: var(--benbenFontColor3);
    width: 686rpx;
    height: 88rpx;
    line-height: 88rpx;
    margin: 12rpx 0rpx 0rpx 0rpx;
  }

  .serviceApply_fd3_8 {
    background: var(--benbenbgColor1);
    position: fixed;
    bottom: calc(0rpx + var(--window-bottom));
    left: 0rpx;
    width: 750rpx;
    height: 150rpx;
    background-size: 100% auto !important;
    z-index: 11;
  }

  .serviceApply_fd3_7_c01 {
    width: 160rpx;
    height: 160rpx;
    margin: 0rpx 24rpx 24rpx 0rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .serviceApply_fd3_7_c001 {
    width: 160rpx;
    height: 160rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .serviceApply_fd3_7_c000 {
    top: 0rpx;
    right: 0rpx;
    z-index: 9;
    color: #ff5536;
  }

  .serviceApply_fd3_7_c00 {
    margin: 0rpx 24rpx 24rpx 0rpx;
  }

  .serviceApply_numberfd3_6_c0_c0 {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(191, 191, 191, 1);
  }

  .serviceApply_numberfd3_6_c0 {
    width: 100%;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 42rpx;
    font-weight: 400;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .serviceApply_input_fd3_6 {
    width: 100%;
    height: 140rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
  }

  .serviceApply_fd3_6 {
    background: #F8F8F8;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 24rpx 24rpx 0rpx 24rpx;
    height: 272rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .serviceApply_fd3_5 {
    padding: 32rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 20rpx 0rpx;
  }

  .serviceApply_fd3_4 {
    border-bottom: 1px solid #eee;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    padding: 0rpx 0rpx 20rpx 0rpx;
  }

  .serviceApply_price2_fd3_3_c2 {
    font-size: 22rpx;
    font-weight: 700;
    color: rgba(240, 35, 37, 1);
  }

  .serviceApply_price1_fd3_3_c2 {
    font-size: 32rpx;
    font-weight: 700;
    color: rgba(240, 35, 37, 1);
  }

  .serviceApply_fd3_3_c2 {
    color: var(--benbenFontColor7);
    font-weight: 600;
  }

  .serviceApply_fd3_3_c1 {
    font-size: 20rpx;
    font-weight: 700;
    color: var(--benbenFontColor7);
    margin: 0rpx 0rpx 0rpx auto;
  }

  .serviceApply_fd3_3 {
    margin: 0rpx 0rpx 8rpx 0rpx;
  }

  .serviceApply_fd3_2_c1_c0 {
    height: 50rpx;
    margin: 0rpx 4rpx 0rpx 4rpx;
    width: 50rpx;
  }

  ::v-deep .serviceApply_numberBoxInputfd3_2_c1 {
    background: #f2f3f5;
    width: 80rpx;
    height: 50rpx;
    text-align: center;
    color: #323232;
    font-size: 28rpx;
  }

  .serviceApply_fd3_2_c0 {
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(17, 17, 17, 1);
    margin: 0rpx auto 0rpx 0rpx;
  }

  .serviceApply_fd3_2 {
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .serviceApply_fd3_0_c2 {
    width: 16rpx;
    height: 28rpx;
    transform: translateY(-6rpx);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .serviceApply_fd3_0_c1 {
    margin: 0rpx 20rpx 0rpx auto;
    text-align: right;
    font-size: 32rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
  }

  .serviceApply_fd3_0_c0 {
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(17, 17, 17, 1);
  }

  .serviceApply_fd3_0 {
    margin: 0rpx 0rpx 32rpx 0rpx;
  }

  .serviceApply_picker4_0_c2 {
    color: var(--benbenFontColor4);
    font-size: 28rpx;
    font-weight: 700;
    line-height: 40rpx;
  }

  .serviceApply_picker4_0_c1 {
    color: #333333;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
  }

  .serviceApply_picker4_0_c0 {
    color: #999999;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .serviceApply_picker4_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
    height: 90rpx;
  }

  .serviceApply_picker5_0_c2 {
    color: var(--benbenFontColor4);
    font-size: 28rpx;
    font-weight: 700;
    line-height: 40rpx;
  }

  .serviceApply_picker5_0_c1 {
    color: #333333;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
  }

  .serviceApply_picker5_0_c0 {
    color: #999999;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .serviceApply_picker5_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
    height: 90rpx;
  }
</style>
